<template>
  <div class="wrap">
    <!-- ------------  查询  ------------------------ -->
    <div class="search">
      <el-row type="flex" justify="start" align="middle" :gutter=10>
        <el-col :span="3">
          <div class="search-add" @click="dialogFormVisible = true">
            +添加座位
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- ------------  列表  ------------------------ -->
      <div class="table">
        <template>
          <el-table :data="list" size="small" style="width: 100%">
            <el-table-column align="center" prop="_id" label="座位id">
            </el-table-column>
            <el-table-column align="center" prop="inner_number" label="桌号">
            </el-table-column>
            <el-table-column align="center" prop="categoryid" label="类型">
              <template slot-scope="scope">
                <span v-if= "scope.row.categoryid === 'A'">小桌(1-2人)</span>
                <span v-if= "scope.row.categoryid === 'B'">中桌(2-4人)</span>
                <span v-if= "scope.row.categoryid === 'C'">大桌(4-8人)</span>
                <span v-if= "scope.row.categoryid === 'D'">超大桌(8-12人)</span>
              </template>
            </el-table-column>
            <el-table-column 
              label="操作">
              <template slot-scope="scope">
                <el-button 
                  @click="edit(scope.row._id)"
                  type="text"
                  size="small">
                  修改
                </el-button>
                <el-button 
                  @click="deleteSeat(scope.row._id)"
                  type="text"
                  size="small">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

    <!-- ------------  弹出框  ------------------------ -->
      <el-dialog title="添加/修改座位" :visible.sync="dialogFormVisible"  width="660px">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item label="类型" prop="categoryid" :label-width="formLabelWidth">
            <el-select v-model="form.categoryid" :disabled="Boolean(form._id)">
              <el-option :label="item.label" :value="item.value" v-for="(item, i) in groupOption" :key="i"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="桌号" prop="label" :label-width="formLabelWidth">
            <el-input type="text" v-model="form.label"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '90px',
      list: [],
      form: {
        _id: '',
        inner_number: '',
        categoryid: ''
      },
      groupOption: [
        {label: '小桌(1-2人)', value: 'A'},
        {label: '中桌(2-4人)', value: 'B'},
        {label: '大桌(4-8人)', value: 'C'},
        {label: '超大桌(8-12人)', value: 'D'},
      ],
      rules: {
        inner_number: [
          { required: true, message: '请输入桌号', trigger: 'submit' }
        ],
        categoryid: [
          { required: true, message: '请选择类型', trigger: 'submit' }
        ]
      }
    }
  },
  mounted(){
    this.fetchData()
  },
  methods: {
    fetchData(){
      const self = this
      self.$api.seat.get().then(res => {
        if(res.code === 0){
          self.list = res.data
        } else {
          self.$message.error(res.userMsg)
        }
      })
    },
    edit (id) {
      const self = this
      let params = {
        _id: id
      }
      self.$api.seat.get(params).then(res => {
        if(res.code === 0){
          self.form = res.data
          self.dialogFormVisible = true
        } else {
          self.$message.error(res.userMsg)
        }
      })
    },
    deleteSeat (id) {
      const self = this
      let params = {
        _id: id
      }
      self.$api.seat.delete(params).then(res => {
        if(res.code === 0){
          self.$message.success('删除成功')
          this.fetchData()
        } else {
          self.$message.error(res.userMsg)
        }
      })
    },
    save(){
      const self = this
      self.$refs.ruleForm.validate((valid) => {
        if (valid) {
          self.dialogFormVisible = false
          if(!this.form._id){
            this.$api.seat.add(self.form).then(res => {
              if (res.code == 0) {
                self.$message.success('操作成功')
                this.fetchData()
                self.form = {
                  _id: '',
                  inner_number: '',
                  categoryid: ''
                }
              }else{
                self.$message.error(res.userMsg)
              }
            })
          }else {
            this.$api.seat.update(self.form).then(res => {
              if (res.code == 0) {
                self.$message.success('操作成功')
                this.fetchData()
                self.form = {
                  _id: '',
                  inner_number: '',
                  categoryid: ''
                }
              }else{
                self.$message.error(res.userMsg)
              }
            })
          }
        } else {
          /* eslint-disable */
          console.log('error submit!!');
          return false;
        }
      })
    }
  }
}
</script>
<style lang="scss">
  @mixin flex-cen {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @mixin p-span {
    p{
      line-height: 24px;
      span:nth-child(1){
        white-space: nowrap;
        color: $color1;
        font-size: 16px;
      }
      span:nth-child(2),span:nth-child(3),span:nth-child(4){
        color: $color2;
        font-size: 16px;
        margin: 0 10px;
        word-break: break-all;
      } 
    }
  }
  .search {
      width: 100%;
      background-color: #ffffff;
      margin-top: 18px;
      margin-bottom: 22px;
      padding: 22px 28px 22px 5px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      .search-add{
        width: 114px;
        height: 100%;
        border: 1px solid #547ef6;
        border-radius:5px;
        text-align: center;
        line-height: 36px;
        color:#547ef5;
        margin-left: 30px;
        cursor:pointer;
      }
      .search-input {
        height: 50px;
        display: flex;
        align-items: center;
        // margin-right: 10px;
        & > span {
          padding: 0 5px;
          font-size: 14px;
          white-space: nowrap;
          @include flex-cen;
        }
        .el-input {
          flex: auto;
          @include flex-cen;
        }
        .el-date-editor {
          margin: 0 5px;
        }
        .el-select {
          flex: auto;
          @include flex-cen;
        }
        .el-button--primary{
          height: 40px;
          
        }
        .button-color{
          background-color: #1D7BFF;
          border-color: #547ef6;
        }
      }
    }
</style>


